import { createBrowserRouter, Navigate } from 'react-router-dom'
import { lazy, Suspense } from 'react'
import MainLayout from '@/layouts/MainLayout'
import AuthLayout from '@/layouts/AuthLayout'
import ProtectedRoute from '@/components/ProtectedRoute'
import Loading from '@/components/common/Loading'

// Lazy load page components
const HomePage = lazy(() => import('@/pages/Home'))
const DashboardPage = lazy(() => import('@/pages/Dashboard'))
const LoginPage = lazy(() => import('@/pages/Login'))
const RegisterPage = lazy(() => import('@/pages/Register'))
const ForgotPasswordPage = lazy(() => import('@/pages/ForgotPassword'))
const ProjectsPage = lazy(() => import('@/pages/Projects'))
const EditorPage = lazy(() => import('@/pages/Editor'))
const TemplatesPage = lazy(() => import('@/pages/Templates'))
const AnalyticsPage = lazy(() => import('@/pages/Analytics'))
const SettingsPage = lazy(() => import('@/pages/Settings'))
const ProfilePage = lazy(() => import('@/pages/Profile'))
const NotFoundPage = lazy(() => import('@/pages/404'))
const ForbiddenPage = lazy(() => import('@/pages/403'))
const HotRadarPage = lazy(() => import('@/pages/HotRadar'))
const ConversationPage = lazy(() => import('@/pages/Conversation'))
const ModelConfigPage = lazy(() => import('@/pages/ModelConfig'))
const FormatTestPage = lazy(() => import('@/pages/test/FormatTest'))
const HintsTestPage = lazy(() => import('@/pages/test/HintsTest'))
const BrainstormWorkshopPage = lazy(() => import('@/pages/BrainstormWorkshop'))

export const router = createBrowserRouter([
  {
    path: '/',
    element: <MainLayout />,
    children: [
      {
        index: true,
        element: <Navigate to="/dashboard" replace />
      },
      {
        path: 'dashboard',
        element: (
          <ProtectedRoute>
            <Suspense fallback={<Loading size="large" tip="加载中..." showProgress />}>
              <DashboardPage />
            </Suspense>
          </ProtectedRoute>
        )
      },
      {
        path: 'projects',
        element: (
          <ProtectedRoute>
            <Suspense fallback={<Loading size="large" tip="加载项目列表..." showProgress />}>
              <ProjectsPage />
            </Suspense>
          </ProtectedRoute>
        )
      },
      {
        path: 'projects/:projectId/editor',
        element: (
          <ProtectedRoute>
            <Suspense fallback={<Loading />}>
              <EditorPage />
            </Suspense>
          </ProtectedRoute>
        )
      },
      {
        path: 'editor',
        element: (
          <ProtectedRoute>
            <Suspense fallback={<Loading />}>
              <EditorPage />
            </Suspense>
          </ProtectedRoute>
        )
      },
      {
        path: 'templates',
        element: (
          <ProtectedRoute>
            <Suspense fallback={<Loading />}>
              <TemplatesPage />
            </Suspense>
          </ProtectedRoute>
        )
      },
      {
        path: 'hot-radar',
        element: (
          <ProtectedRoute>
            <Suspense fallback={<Loading size="large" tip="加载热点雷达..." showProgress />}>
              <HotRadarPage />
            </Suspense>
          </ProtectedRoute>
        )
      },
      {
        path: 'conversation',
        element: (
          <ProtectedRoute>
            <Suspense fallback={<Loading size="large" tip="启动AI对话..." showProgress />}>
              <ConversationPage />
            </Suspense>
          </ProtectedRoute>
        )
      },
      {
        path: 'analytics',
        element: (
          <ProtectedRoute requireAdmin>
            <Suspense fallback={<Loading />}>
              <AnalyticsPage />
            </Suspense>
          </ProtectedRoute>
        )
      },
      {
        path: 'settings',
        element: (
          <ProtectedRoute>
            <Suspense fallback={<Loading />}>
              <SettingsPage />
            </Suspense>
          </ProtectedRoute>
        )
      },
      {
        path: 'model-config',
        element: (
          <ProtectedRoute>
            <Suspense fallback={<Loading />}>
              <ModelConfigPage />
            </Suspense>
          </ProtectedRoute>
        )
      },
      {
        path: 'brainstorm/workshop',
        element: (
          <ProtectedRoute>
            <Suspense fallback={<Loading size="large" tip="启动创作工坊..." showProgress />}>
              <BrainstormWorkshopPage />
            </Suspense>
          </ProtectedRoute>
        )
      },
      {
        path: 'profile',
        element: (
          <ProtectedRoute>
            <Suspense fallback={<Loading />}>
              <ProfilePage />
            </Suspense>
          </ProtectedRoute>
        )
      },
      {
        path: 'test/format-test',
        element: (
          <Suspense fallback={<Loading />}>
            <FormatTestPage />
          </Suspense>
        )
      },
      {
        path: 'test/hints-test',
        element: (
          <Suspense fallback={<Loading />}>
            <HintsTestPage />
          </Suspense>
        )
      },
      {
        path: '403',
        element: (
          <Suspense fallback={<Loading />}>
            <ForbiddenPage />
          </Suspense>
        )
      }
    ]
  },
  {
    path: '/auth',
    element: <AuthLayout />,
    children: [
      {
        path: 'login',
        element: (
          <Suspense fallback={<Loading />}>
            <LoginPage />
          </Suspense>
        )
      },
      {
        path: 'register',
        element: (
          <Suspense fallback={<Loading />}>
            <RegisterPage />
          </Suspense>
        )
      },
      {
        path: 'forgot-password',
        element: (
          <Suspense fallback={<Loading />}>
            <ForgotPasswordPage />
          </Suspense>
        )
      }
    ]
  },
  {
    path: '*',
    element: (
      <Suspense fallback={<Loading />}>
        <NotFoundPage />
      </Suspense>
    )
  }
])